<template>
  <div class="rankinfo">
    <zeroHeader :zerotitle="stickinfo"></zeroHeader>
    <div class="wrapper" ref="wrapper" :style="{'bottom':$store.state.curindex!=-1?'40px':''}">
      <mt-spinner :type="2" color="#d43c33" v-if="showspinner"></mt-spinner>
      <div class="content">
        <div class="header" v-if="ranklist!=null">
          <!-- 左边图片 -->
          <div class="header_left">
            <div
              class="header_bd"
              :style="{'background':`url(${ranklist.coverImgUrl}?param=150y150)`}"
            ></div>
            <div class="header_cover">
              <img :src="ranklist.coverImgUrl+'?param=150y150'" alt />
              <div class="header_playCount">
                <i class="iconfont icon-erji"></i>
                {{ranklist.playCount>1.0e8?(ranklist.playCount/1.0e8).toFixed(0)+'亿':ranklist.playCount>1.0e4?(ranklist.playCount/1.0e4).toFixed(0)+'万':ranklist.playCount }}
              </div>
            </div>
          </div>
          <!-- 右边详情 -->
          <div class="header_right">
            <div class="header_name">{{ranklist.name}}</div>
            <div class="header_creator">
              <div class="header_creator_pic">
                <img :src="ranklist.creator.avatarUrl+'?param=100y100'" alt />
              </div>
              <div class="header_creator_name">{{ranklist.creator.nickname}} ></div>
              <div class="header_creator_info">{{ranklist.description}}</div>
            </div>
          </div>
        </div>
        <!-- loading组件 -->
        <zeroLoading v-if="songmenu.length==0"></zeroLoading>
        <!-- 歌单列表组件 -->
        <!-- <zeroMenu :songmenu="ranklist" v-else></zeroMenu> -->
        <div class="list" v-else>
          <div class="top">
            <i class="iconfont icon-bofang" @click="playall()"></i>
            <p>播放全部</p>
            <span>(共{{ranklist.trackCount}}首)</span>
          </div>
          <zeroSongs :zerosongs="songmenu"></zeroSongs>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import zeroHeader from "@/components/ZeroHeader.vue";
import BScroll from "better-scroll";
import zeroSongs from "@/components/ZeroSongs.vue";
export default {
  name: "rankinfo",
  data() {
    return {
      ranklist: null,
      songmenu: [],
      stickinfo: "",
      showspinner: false
    };
  },
  methods: {
    get_list() {
      //获取 跳转路由的id
      let id = this.$route.params.id;
      // 获取歌单详情接口并设置参数
      let { rankinfo } = this.api;
      rankinfo.params = { idx: id };
      // 获取歌单详情
      this.getsource(rankinfo).then(res => {
        console.log("榜单详情", res);
        this.ranklist = res.data.playlist;
        this.songmenu = res.data.playlist.tracks;
      });
    },
    playall() {
      this.audio.playSong(this.songmenu[0].id);
      this.$store.commit("openPlayer", true);
      let curlist = JSON.parse(JSON.stringify(this.songmenu));
      this.$store.commit("curPlayList", curlist);
      this.$store.commit("curIndex", 0);
    }
  },
  created() {
    this.get_list();
  },
  // better-scroll的函数
  mounted() {
    this.$nextTick(() => {
      //$refs绑定元素
      if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.wrapper, {
          //开启点击事件 默认为false
          click: true,
          mouseWheel: true,
          pullDownRefresh: {
            // 下拉距离超过30px触发pullingDown事件
            threshold: 30,
            // 回弹停留在距离顶部30px的位置
            stop: 30
          }
        });
        this.scroll.on("scroll", ({ x, y }) => {
          if (y < -170) {
            // 纵向滚动到一定距离时，吸顶显示，原设吸顶display:none。
            this.stickinfo = this.ranklist.name || "排行榜";
            //  console.log('假装吸顶');
          } else {
            this.stickinfo = "";
          }
        });
        this.scroll.on("pullingDown", () => {
          console.log("处理下拉刷新操作");
          this.showspinner = true;
          this.get_list();

          setTimeout(() => {
            console.log("刷新成功");
            // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次
            this.scroll.finishPullDown();
            this.showspinner = "";
          }, 1500);
        });
      } else if (!this.$refs.wrapper) {
        return;
      } else {
        this.scroll.refresh();
      }
    });
  },
  components: {
    zeroHeader,
    zeroSongs
  }
};
</script>


<style lang='scss'>
$zerocolor: #d43c33;
$fontcolor: #333;
.rankinfo {
  width: 100%;
  height: 100%;
  .wrapper {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    overflow: hidden;
    .header {
      display: flex;
      position: relative;
      color: #fff;
      width: 100%;
      padding: 50px 15px 30px 15px;
      .header_bd {
        &::after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          filter: blur(8px) opacity(0.9) brightness(0.8);
          width: 100%;
          height: 100%;
          background: inherit;
          background-repeat: no-repeat;
          background-size: cover;
          background-position: center;
          z-index: -1;
        }
      }
      .header_cover {
        width: 30vw;
        height: 30vw;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        // margin: 0 20px 30px 30px;
        // &::after {
        //   content: "";
        //   position: absolute;
        //   top: 0;
        //   left: 0;
        //   width: 100%;
        //   height: 20px;
        //   box-shadow: inset 0 15px 10px -5px #949393;
        // }

        img {
          width: 100%;
          height: 100%;
        }
        .header_playCount {
          position: absolute;
          top: 2px;
          right: 8px;
          font-size: 12px;
          color: #fff;
          font-weight: 500;
          z-index: 3;
        }
      }
      .header_right {
        margin-left: 20px;
        .header_name {
          font-size: 16px;
          text-align: left;
        }
        .header_creator {
          text-align: left;
          margin-top: 10px;
          .header_creator_pic {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            overflow: hidden;
            display: inline-block;
            vertical-align: middle;

            img {
              width: 100%;
              height: 100%;
            }
          }
          .header_creator_name {
            display: inline-block;
            vertical-align: middle;
            font-size: 12px;
            margin-left: 10px;
          }
        }
        .header_creator_info {
          font-size: 12px;
          height: 2rem;
          margin-top: 10px;
          // margin-right: 20px;
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -moz-box-orient: vertical;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
    .list {
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      box-shadow: 0px -1px 2px #7b7b7b;
      padding: 8px 0;
      .top {
        border-left: 2px solid $zerocolor;
        text-align: left;
        line-height: 28px;
        margin-left: 10px;
        i {
          font-size: 24px;
          margin: 0 5px;
          vertical-align: middle;
        }
        p {
          font-size: 16px;
          display: inline;
          vertical-align: middle;
        }
        span {
          font-size: 10px;
          color: #bfbbbb;
          margin: 0 8px;
        }
      }
    }
  }
}
</style>